<template>
  <div class="guide-result-page">
    <!-- 页面头部 -->
    <div class="page-header bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-8">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
              为您生成的{{ route.query.days }}日游攻略
            </h1>
            <p class="text-gray-600 dark:text-gray-400">
              根据您的偏好，AI 为您规划了以下行程
            </p>
          </div>
          <div class="flex items-center gap-4">
            <el-button type="primary" @click="handleSave">
              <el-icon class="mr-1"><Download /></el-icon>
              保存攻略
            </el-button>
            <el-button @click="handleShare">
              <el-icon class="mr-1"><Share /></el-icon>
              分享攻略
            </el-button>
            <el-button type="warning" @click="handleRegenerate">
              <el-icon class="mr-1"><RefreshRight /></el-icon>
              重新生成
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto px-4 py-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8">
        <!-- 行程概览 -->
        <div class="mb-8">
          <h3
            class="text-xl font-medium text-gray-900 dark:text-white mb-6 flex items-center"
          >
            <el-icon class="mr-2"><Calendar /></el-icon>
            行程概览
          </h3>
          <el-timeline>
            <el-timeline-item
              v-for="(day, index) in guideData.itinerary"
              :key="index"
              :type="getTimelineItemType(index)"
              :timestamp="'第' + (index + 1) + '天'"
              placement="top"
            >
              <div class="timeline-card">
                <h4 class="text-lg font-medium mb-3">{{ day.title }}</h4>
                <div class="space-y-2">
                  <div
                    v-for="(spot, spotIndex) in day.spots"
                    :key="spotIndex"
                    class="flex items-center text-sm"
                  >
                    <span class="time-tag">{{ spot.time }}</span>
                    <span class="spot-name">{{ spot.name }}</span>
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 每日详细行程 -->
        <div class="space-y-8">
          <div
            v-for="(day, index) in guideData.itinerary"
            :key="index"
            class="day-detail-card"
          >
            <h3
              class="text-xl font-medium text-gray-900 dark:text-white mb-6 flex items-center"
            >
              <span class="day-number">{{ index + 1 }}</span>
              {{ day.title }}
            </h3>
            <div class="space-y-6">
              <div
                v-for="(spot, spotIndex) in day.spots"
                :key="spotIndex"
                class="spot-detail-card"
              >
                <div class="flex items-center justify-between mb-4">
                  <h4 class="text-lg font-medium flex items-center">
                    <el-icon class="mr-2"><Location /></el-icon>
                    {{ spot.name }}
                  </h4>
                  <span class="text-sm text-gray-500">{{ spot.time }}</span>
                </div>
                <p class="text-gray-600 dark:text-gray-400 mb-4">
                  {{ spot.description }}
                </p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div class="tip-card" v-if="spot.tips">
                    <el-icon><InfoFilled /></el-icon>
                    <span>{{ spot.tips }}</span>
                  </div>
                  <div class="tip-card" v-if="spot.transportation">
                    <el-icon><Van /></el-icon>
                    <span>{{ spot.transportation }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 费用预算 -->
        <div class="mt-8 pt-8 border-t dark:border-gray-700">
          <h3
            class="text-xl font-medium text-gray-900 dark:text-white mb-6 flex items-center"
          >
            <el-icon class="mr-2"><Money /></el-icon>
            费用预算
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div
              v-for="(category, index) in guideData.budget"
              :key="index"
              class="budget-card"
            >
              <h4 class="text-lg font-medium mb-2">{{ category.name }}</h4>
              <div
                class="text-2xl font-bold text-primary-600 dark:text-primary-400"
              >
                ¥{{ category.amount }}
              </div>
              <p class="text-sm text-gray-500 mt-2">
                {{ category.description }}
              </p>
            </div>
          </div>
        </div>

        <!-- 注意事项 -->
        <div class="mt-8 pt-8 border-t dark:border-gray-700">
          <h3
            class="text-xl font-medium text-gray-900 dark:text-white mb-6 flex items-center"
          >
            <el-icon class="mr-2"><Warning /></el-icon>
            注意事项
          </h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div
              v-for="(note, index) in guideData.notes"
              :key="index"
              class="note-card"
            >
              <h4 class="text-lg font-medium mb-2">{{ note.title }}</h4>
              <p class="text-gray-600 dark:text-gray-400">{{ note.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  Calendar,
  Download,
  InfoFilled,
  Location,
  Money,
  RefreshRight,
  Share,
  Van,
  Warning,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();

// 模拟的攻略数据
const guideData = ref({
  itinerary: [
    {
      title: "贵港文化探索之旅",
      spots: [
        {
          time: "09:00-11:00",
          name: "贵港博物馆",
          description: "了解贵港历史文化，参观珍贵文物展览。",
          tips: "建议在开馆时间到达，避开人流高峰。",
          transportation: "可乘坐2路公交车到达。",
        },
        {
          time: "11:30-13:30",
          name: "贵港美食街",
          description: "品尝地道贵港美食，体验本地饮食文化。",
          tips: "推荐尝试螺蛳粉和艇仔粥。",
          transportation: "步行10分钟可到达。",
        },
      ],
    },
  ],
  budget: [
    {
      name: "交通费用",
      amount: 50,
      description: "包含市内公交车费用",
    },
    {
      name: "餐饮费用",
      amount: 150,
      description: "包含午餐和晚餐",
    },
    {
      name: "门票费用",
      amount: 80,
      description: "包含景点门票",
    },
  ],
  notes: [
    {
      title: "天气提醒",
      content: "建议随身携带遮阳伞，注意防晒。",
    },
    {
      title: "交通建议",
      content: "景点之间可以乘坐公交车或打车，建议提前规划路线。",
    },
  ],
});

// 获取时间线项目类型
const getTimelineItemType = (index) => {
  const types = ["primary", "success", "warning", "danger"];
  return types[index % types.length];
};

// 保存攻略
const handleSave = () => {
  ElMessage.success("攻略已保存");
};

// 分享攻略
const handleShare = () => {
  ElMessage.success("分享链接已复制到剪贴板");
};

// 重新生成
const handleRegenerate = () => {
  router.push("/ai-guide");
};

// 页面加载时根据路由参数获取攻略数据
onMounted(() => {
  // TODO: 根据路由参数调用API获取攻略数据
  console.log("路由参数:", route.query);
});
</script>

<style lang="scss" scoped>
.guide-result-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900;

  .timeline-card {
    @apply bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm;
  }

  .time-tag {
    @apply px-2 py-1 bg-primary-50 dark:bg-primary-900/50 text-primary-600 dark:text-primary-400 rounded mr-3;
  }

  .day-number {
    @apply w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400 flex items-center justify-center text-sm mr-3;
  }

  .spot-detail-card {
    @apply bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6;
  }

  .tip-card {
    @apply flex items-center gap-2 p-3 bg-white dark:bg-gray-800 rounded-lg;
  }

  .budget-card {
    @apply bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6 transition-all duration-300;

    &:hover {
      @apply transform -translate-y-1 shadow-md;
    }
  }

  .note-card {
    @apply bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6 transition-all duration-300;

    &:hover {
      @apply transform -translate-y-1 shadow-md;
    }
  }
}
</style>
